<template>
  <div class="cate">
    <header>
      <div class="headerBar">
        <img src="@/assets/lt.png" alt="" @click="back">
        <span>列表</span>
      </div>
      <div class="NavBar">
        <div id="nav">
          <nav>
            <div
              v-for="(item, index) in arr"
              @click="reLoadDataList(index)"
              :class="{ active:index == active }"
              :key="index"
            >{{ item.title }}</div>
          </nav>
        </div>
      </div>
    </header>
    <div class="whitespace"></div>
    <div class="container">
      <router-link class="prod"
        v-for="prod of data"
        :key="prod.id"
        tag="div"
        :to="{
          name: 'details',
          params: {
            id: prod.id,
            prod
          }
        }"
      >
        <img :src="prod.img" alt="">
        <div>
          <h4 class="desc">{{ prod.desc }}</h4>
          <h3 class="name">{{ prod.name }}</h3>
          <p></p>
          <span>￥<i>{{ prod.price }}</i></span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Categories',
  data () {
    return {
      active: 0,
      arr: [],
      data: []
    }
  },
  props: ['id', 'page', 'index'],
  methods: {
    reLoadDataList (index) {
      this.$http('/api/Mall').then(resp => {
        this.data = resp.data.res_body.mallList[this.page].data[index].prodList
      })
      this.active = index
    },
    back () {
      this.$router.go(-1)
    }
  },
  mounted () {
    this.$http('/api/Mall').then((resp) => {
      this.arr = resp.data.res_body.mallList[this.page].data
      this.data = resp.data.res_body.mallList[this.page].data[this.index].prodList
    })
  }
}
</script>

<style lang="scss" scoped>
  .cate {
    display: flex;
    flex-direction: column;
    header {
      position: fixed;
      top: 0;
      left: 0;
      border-bottom: 1px solid rgb(230, 230, 230);
      z-index: 99999;
      background-color: #fff;
      .headerBar {
        display: flex;
        width: 100%;
        height: 45px;
        align-items: center;
        img {
          width: 39px;
          height: 45px;
        }
        span {
          font-size: 16px;
          color: #333;
          margin-left: 30%;
        }
      }
      .NavBar {
        padding: 0 10px;
        overflow: hidden;
        height: 39.5px;
        #nav {
          nav{
            width: 430px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: middle;
            -ms-flex-align: middle;
            align-items: middle;
            overflow-y: hidden;
          }
          div{
            text-align: center;
            font-size: 12px;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            padding: 10px;
            margin: 5px;
            color: rgb(105, 105, 105);
          }
          div.active{
            color: rgb(132, 95, 63);
            border-bottom: 4px solid rgb(132, 95, 63);
          }
        }
      }
    }
    .whitespace {
      height: 84.5px;
      width: 100%;
      margin-bottom: 15px;
    }
    .container {
      width: 100%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .prod {
        width: 172.5px;
        margin: 7px;
        img {
          width:  172.5px;
          height:  172.5px;
        }
        div {
          overflow: hidden;
          h4 {
            padding-left: 3px;
            margin-right: 8px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgb(246, 242, 241);
            width: 100%;
            color: rgb(159, 128, 82);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          h3 {
            margin-top: 10px;
            font-size: 13px;
            color: rgb(51, 51, 51);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 10px;
          }
          span {
            color: rgb(182, 9, 9);
            font-size: 10px;
            i {
              font-size: 15px;
              margin-left: 3px;
            }
          }
        }
      }
    }
  }
</style>
